<template>
  <div class="analysisResultHistory">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
        >
          <el-button type="primary" icon="el-icon-search" @click="doSearch">
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <pagination
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :total="total"
        @pagination="getList"
      />
    </el-card>
    <AnalysisModel ref="AnalysisModel" @initList="initList" />
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import { getHisList } from '@/api/auto-analyze-warning/analysisResult'
import AnalysisModel from '../analysisResult/components/TheAnalysisDetail.vue'

export default {
  name: 'AnalysisResultHistory',
  components: { AnalysisModel },
  mixins: [mySetting],
  data() {
    const searchTags = [
      {
        label: this.$t('calculationDate'),
        prop: '',
        tag: 'Dyndaterange',
        event: (value) => {
          this.infoForm.stratdate = Array.isArray(value) ? value[0] : null
          this.infoForm.enddate = Array.isArray(value) ? value[1] : null
        }
      },
      { label: this.$t('SBLVersion'), prop: 'SBLVersion', tag: 'DynInput' },
      { label: this.$t('versionCycle'), prop: 'versionCycle', tag: 'DynInput' }
    ]
    const tableColumns = [
      {
        prop: '',
        label: this.$t('index'),
        type: 'index',
        width: '50px',
        templete: (_scope) => {
          return (
            <span>
              {(this.listQuery.page - 1) * this.listQuery.size +
                _scope.$index +
                1}
            </span>
          )
        }
      },
      {
        prop: 'processSpecificationNo',
        label: this.$t('processSpecificationNumber'),
        width: '240'
      },
      { prop: 'customer', label: this.$t('customer'), width: '200' },
      { prop: 'productName', label: this.$t('productName'), width: '200' },
      { prop: 'packingFormCode', label: this.$t('packageType'), width: '200' },
      { prop: 'processFlow', label: this.$t('processNo'), width: '200' },
      { prop: 'cycle', label: this.$t('cycle'), width: '200' },
      { prop: 'traceCycle', label: this.$t('traceCycle'), width: '200' },
      { prop: 'deviation', label: this.$t('Deviation'), width: '200' },
      { prop: 'cycleVer', label: this.$t('versionCycle'), width: '200' },
      { prop: 'sblVer', label: this.$t('SBLVersion'), width: '200' },
      {
        prop: 'status',
        label: this.$t('isEnable'),
        width: '200',
        templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.status}
              active-value={1}
              inactive-value={0}
              active-color='#13ce66'
              inactive-color='#ff4949'
              disabled
            />
          )
        }
      },
      {
        prop: 'calculateDate',
        label: this.$t('calculationDate'),
        width: '200'
      },
      {
        prop: '',
        label: this.$t('details'),
        templete: (_scope) => {
          return (
            <el-link
              type='primary'
              underline={false}
              onClick={() =>
                this.$refs.AnalysisModel.handleOpen(_scope.row, true)
              }
            >
              {this.$t('details')}
            </el-link>
          )
        },
        fixed: 'right'
      }
    ]
    return {
      infoForm: {},
      selectList: {},
      searchTags: Object.freeze(searchTags),
      tableColumns: Object.freeze(tableColumns),
      tableLoading: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    async initList() {
      const id = this.$route.params
      this.infoForm = Object.assign({}, this.infoForm, id)
      const res = await getHisList(
        this.$clearNull({ ...this.listQuery, ...this.infoForm })
      )
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    getHisList(page) {
      this.listQuery = page
      this.initList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
}
</style>
